<template>
  <div class="detail-container">
    <div class="header-wrapper">
      <el-button 
        type="primary" 
        link
        class="back-button"
        @click="handleBack"
      >
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      
      <div class="detail-meta">
        <div class="type-badge" :class="getTypeClass(detailData.notificationId)">
          {{ getTypeName(detailData.notificationId) }}
        </div>
        <div class="time-stamp">{{ formatDate(detailData.createdAt) }}</div>
      </div>
    </div>

    <el-scrollbar v-loading="loading">
      <div class="detail-content">
        <h1 class="detail-title">{{ detailData.title }}</h1>
        
        <div class="content-body">
          <div v-if="detailData.content" 
               class="content-text" 
               v-html="formatContent(detailData.content)">
          </div>
          
          <div v-if="detailData.attachments" class="attachments">
            <h3>相关附件</h3>
            <ul>
              <li v-for="(file, index) in detailData.attachments" :key="index">
                <el-link type="primary">{{ file.name }}</el-link>
                <span class="file-size">({{ formatFileSize(file.size) }})</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <TabNav />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getNotificationDetail } from '../api/index.js';
import TabNav from '@/components/TabNav/TabNav.vue';

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const detailData = ref({});

// 复用列表页的格式函数
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

const getTypeName = (type) => {
  const typeNameMap = {
    1: '面试技巧',
    2: '面试指导',
    3: '学习资料',
    4: '招聘信息'
  };
  return typeNameMap[type] || '其他信息';
};

// 类型类名映射方法
const getTypeClass = (type) => {
  const classMap = {
    1: 'interview-skills',
    2: 'interview-guidance',
    3: 'learning-materials',
    4: 'recruitment-info'
  };
  return classMap[type] || 'other';
};

const formatContent = (content) => {
  return content.replace(/\n/g, '<br>');
};

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

const handleBack = () => {
  router.go(-1);
};
const fetchNotificationsDettail = async () => {
  try {
    loading.value = true;
    const res = await getNotificationDetail(route.params.id);
    if (res.data) {
      detailData.value = res.data;
    } else {
      console.error('获取详情失败:', res);
    }
  } catch (error) {
    console.error('获取详情失败:', error);
  } finally {
    loading.value = false;
  }
}
onMounted(()=>{
  fetchNotificationsDettail()
});
</script>

<style scoped>
.detail-container {
  /* background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)); */
  background: #d4e7ff; 
  min-height: 100vh;
  padding: 24px;
  /* max-width: 1200px; */
  margin: 0 auto;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f5;
}
.el-scrollbar {
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  box-shadow: #409EFF 0 2px 8px;
  padding: 12px;
}
.back-button {
  font-size: 14px;
  color: #409EFF;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-content {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.detail-title {
  color: #303133;
  font-size: 24px;
  margin-bottom: 24px;
}

.content-body {
  line-height: 1.8;
  font-size: 14px;
  color: #606266;
}

.attachments {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f2f5;
}

.file-size {
  color: #909399;
  margin-left: 8px;
}

.type-badge.interview-skills {
  background: #409EFF20;
  color: #409EFF;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.type-badge.interview-guidance {
  background: #67C23A20;
  color: #67C23A;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.type-badge.learning-materials {
  background: #9C27B020;
  color: #9C27B0;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.type-badge.recruitment-info {
  background: #E6A23C20;
  color: #E6A23C;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}
.time-stamp {
  font-size: 12px;
  color: #909399;
}
</style>